<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
<%
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragrma","no-cache");
response.setDateHeader("Expires",0);
%>
<title>校园失物招领系统</title>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 200px;
    text-align: center;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<script type="text/javascript" src="./js/head.js"></script>
</head>
<body>
	<div id="main" style="width: 100%;height: 100%;" oncontextmenu="return false">

		<!-- =================================================================轮播图 -->
		<div>
			<el-carousel :interval="4000" height="200px">
			    <el-carousel-item v-for="item in titleList" :key="item">
			      <h3 class="logo">{{item}}</h3>
			    </el-carousel-item>
			</el-carousel>
		</div>
		<!-- <div class="header">
			<h3>公告消息</h3>
			<img src='img/logo.png'>
		</div> -->

		<div class="mt20 ml10 mr10 border" style="padding: 10px;">
			
			<div class="hand w200 lan">
				<i class="el-icon-caret-bottom"></i>公告消息
			</div>
			<div class="mt10">
				<el-table :data="tableData" stripe style="width: 100%;" ><!-- -->
				    <el-table-column prop="tname" label="主题" head-align="center" align="center" sortable show-overflow-tooltip>
				    	<template slot-scope="scope" >
					        <el-badge value="new" class="new" v-if="scope.row.flag">
					        	<span><a href="#" @click="open(scope.row.tid)">{{ scope.row.tname }}</a></span>
					        </el-badge>
					        <el-badge value="" v-else>
					        	<span><a href="#" @click="open(scope.row.tid)">{{ scope.row.tname }}</a></span>
					        </el-badge>
					    </template>
				    </el-table-column>
				    <el-table-column prop="tcontent" label="内容" head-align="center" align="center" sortable show-overflow-tooltip></el-table-column>
				    <el-table-column prop="plate.pname" label="类型" head-align="center" align="center" sortable show-overflow-tooltip></el-table-column>
				    <el-table-column prop="user.userName" label="发布人" head-align="center" align="center" sortable show-overflow-tooltip></el-table-column>
				    <el-table-column prop="t_create_time" label="发布时间" :formatter="dateFormat" head-align="center" align="center" sortable show-overflow-tooltip></el-table-column>
				</el-table>
				
				<div class="flex wEnd mt10">
					<el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currPage"
				      :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="total"
				      layout="total, sizes, prev, pager, next, jumper">
	   				</el-pagination>
				</div>
				
			</div>
			
		</div>
		<div v-show='false'><script type="text/plain" id="EditorEdit" style="width:100%;" ></script></div>
		<el-dialog class='p10' v-model='topicData' :visible.sync='topicV' :close-on-click-modal=false width="70%" title="帖子详情">   
			<div style='border: 1px solid #dfe4ed;border-radius: 4px;padding: 10px 20px;'>
				<div class='flex wBetween'>
					<h1></h1>
					<h1>{{topicData.tname}}</h1>
					<h1></h1>
				</div>
				<div class='flex wBetween mt10'>
					<div><span>发布人: {{topicData.user.userName}}</span></div>
					<div><span>所属板块: {{topicData.plate.pname}}</span></div>
					<div><span>发布时间: {{topicData.createDate}}</span></div>
				</div>
				<div class="mt20" style="height:400px;" id="content"></div><!-- {{topicData.tcontent}} -->
				<div class="flex wEnd"><span>联系方式: {{topicData.user.tel}}</span></div>
			</div>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" src="./js/main.js"></script>
</html>